<template>
	<transition name="fade">
		<div class="dialog" v-if="isShow" :class="{'down_dialog' : type==='downDialog' || type==='mallGoodsInfoDownDialog' || type === 'shareDownDialog' || type==='normalDialog'}">
			<div class="tip" v-if="type === 'tip'">{{content}}</div>
			<div class="down_dialog fadeInUp animated" v-if="type === 'downDialog'">
				<ul>
					<li v-for="(item, index) in menus">
						<a @click="downDialogMenuClickHandle($event, item.handle)" class="down_dialog_menu_item">{{item.title}}</a>
					</li>
					<li>
						<a @click="downDialogMenuCancelHandle($event)" class="down_dialog_cancel">取 消</a>
					</li>
				</ul>
			</div>
			<div class="down_dialog fadeInUp animated" v-if="type === 'shareDownDialog'">
				<ul>
					<li>
						<WebShare :title="title" :desc="desc" :url="url" :pic="pic" />
					</li>
					<li>
						<a @click="shareDownDialogMenuCancelHandle($event)" class="down_dialog_cancel">取 消</a>
					</li>
				</ul>
			</div>
			<div class="down_dialog mall_goods_info fadeInUp animated" v-if="type === 'mallGoodsInfoDownDialog'">
				<h1>基本信息</h1>
				<ul>
					<li class="content">
						<div v-for="(item, index) in mallGoodsInfo">
							<label>{{item.name}}</label>{{item.value}}
						</div>
					</li>
					<li>
						<a @click="mallGoodsDownDialogMenuCancelHandle($event)" class="down_dialog_cancel">取 消</a>
					</li>
				</ul>
			</div>
			<div class="normal_dialog fadeIn animated" v-if="type === 'normalDialog'">
				<p>{{dialogData.content}}</p>
				<span>
					<a @click="normalDialogEnter($event, dialogData.enterHandel)" class="normal_dialog_enter">{{dialogData.entermsg}}</a>
					<a @click="normalDialogCancel($event)" class="normal_dialog_cancel">{{dialogData.cancelmsg}}</a>
				</span>
			</div>
		</div>
	</transition>
</template>

<script>
	import WebShare from "../../components/common/web-share.vue";
	export default {
		name: "Dialog",
		props: ["type", "isShow", "content", "menus", "dialogData", "title", "desc", "url", "pic", "mallGoodsInfo"],
		data: function(){
			return {
				
			}
		},
		components:{
			WebShare
		},
		methods:{
			downDialogMenuCancelHandle(e){
				this.$emit("showDialogHandle", this.isShow ? false : true);
			},
			downDialogMenuClickHandle(e, callback){
				let that = this;
				callback && callback((type, v) => {
					that.$emit(type, v);
					this.$emit("showDialogHandle", false);
				})
			},
			shareDownDialogMenuCancelHandle(e, callback){
				this.$emit("showShareDialogHandle", this.isShow ? false : true);
			},
			mallGoodsDownDialogMenuCancelHandle(e){
				this.$emit("showMallGoodsDialogHandle", this.isShow ? false : true);
			},
			normalDialogEnter(e, callback){
				let that = this;
				callback && callback(() => {
					this.$emit("showDialogHandle", false);
				});
			},
			normalDialogCancel(e){
				this.$emit("showDialogHandle", this.isShow ? false : true);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.dialog{
		z-index: 999998;
		background-color: rgba(255,255,255,.1);
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		display: flex;
		display: -webkit-flex;
		display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
		display: -moz-box; /* Firefox 17- */  
		display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
		display: -moz-flex; /* Firefox 18+ */  
		display: -ms-flexbox; /* IE 10 */  
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		justify-content: center;
		-webkit-justify-content: center;
		align-content: center;
		-webkit-align-content: center;
		align-items: center;
		-webkit-align-items: center;
		&.down_dialog{
			background-color: rgba(0,0,0,.5);
		}
		div{
			&.tip{
				display:block;
				align-self: auto;
				background-color: rgba(0,0,0,.8);
				color: rgb(255,255,255);
				padding:10/@base 20/@base;
				border-radius: 5/@base;
			}
			&.down_dialog{
				position:absolute;
				bottom:0;
				left:0;
				right:0;
				&.mall_goods_info{
					h1{
						background-color: #fff;
						font-size: 22/@base;
						padding:20/@base;
					}
					ul{
						li{
							background-color: #fff;
							font-size: 20/@base;
							padding:10/@base 20/@base 20/@base 20/@base;
							&.content{
								height:400/@base;
								overflow:auto;
								overflow-x:hidden;
								div{
									padding:10/@base 0;
									label{
										margin-right:20/@base;
										border-right:1/@base solid #ccc;
										padding:0 20/@base 0 0;
										color:#999;
									}
								}
							}
							&:last-child{
								padding:0;
							}
						}
					}
				}
				ul{
					li{
						a{
							display:block;
							padding:20/@base;
							font-size:22/@base;
							text-align: center;
							&.down_dialog_menu_item{
								background-color: #CCCCCC;
								color:#000000;
							}
							&.down_dialog_cancel{
								background-color: #2e8b57;
								color:#fff;
							}
						}
					}
				}
			}
			&.normal_dialog{
				background-color:#fff;
				margin:0 20/@base;
				border-radius: 5/@base;
				overflow:hidden;
				width:300/@base;
				p{
					padding:40/@base 10/@base;
					font-size:22/@base;
				}
				span{
					display:flex;
					a{
						display:block;
						text-align: center;
						font-size:22/@base;
						padding:10/@base;
						&.normal_dialog_enter{
							width:50%;
							background-color: #CC2020;
							color:#fff;
						}
						&.normal_dialog_cancel{
							width:50%;
							background-color: #CCCCCC;
							color:#999;
						}
					}
				}
			}
		}
	}
</style>
